{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "firefox/family/includes/macros.html" import module_tag, browser_border %}

<section id="mental-health" class="c-mental-health">
  <div class="mzp-l-content mzp-t-content-xl">
    {{ module_tag(title='Mental Health', anchor='mental-health') }}

    <div class="l-grid">
      {% call browser_border(class='t-content-container') %}
        <h3 class="c-subtitle">The never-ending storrrrrries</h3>
        <p>Does your kid get stuck down endless, algorithmic rabbit holes where time
          and space and homework cease to exist?</p>
      {% endcall %}

      {% call browser_border(class='t-doomscroll-container') %}
        <div class="c-doomscroll"></div>
      {% endcall %}

      {% call browser_border(class='t-stop-button-container') %}
        <div class="c-stop-button c-card t-shadow">
          <img class="c-stop-button-text" width="81" height="24" src="{{ static('img/firefox/family/text-stop.svg') }}" alt="">
          <img class="c-stop-button-cursor" width="43" height="67" src="{{ static('img/firefox/family/cursor.svg') }}" alt="">
        </div>
      {% endcall %}

      <div class="c-card t-shadow">
        <h4 class="c-title-uppercase">Be sure to discuss:</h4>
        <ul class="mzp-u-list-styled">
          <li>Many apps are designed (by evil geniuses) to suck them in. It’s not your kid’s fault.</li>
          <li>Consider instituting “charging breaks” or curfews for their phone/device.</li>
          <li>Talk about how their social apps make them feel.</li>
          <li>Think about turning off some or all notifications.</li>
        </ul>
      </div> <!-- .c-card -->
    </div> <!-- .l-grid -->
  </div> <!-- .mzp-l-content -->
</section>
